<template>
    <svg class="svg-icon" aria-hidden="true" :style="{ fontSize: size }">
        <use :href="symbolId" :fill="color"></use>
    </svg>
</template>

<script lang="ts" name="SvgIcon">
export default defineComponent({
    name: 'svg-icon',
    props: {
        prefix: {
            type: String,
            default: 'icon',
        },
        // 名字
        name: {
            type: String,
            required: true,
        },
        // 颜色
        color: {
            type: String,
            default: '#333',
        },
        // 大小
        size: {
            type: String,
            default: '16px',
        },
    },
    setup(props) {
        const symbolId = computed(() => `#${props.prefix}-${props.name}`)
        return { symbolId }
    },
})
</script>

<style lang="scss" scoped>
.svg-icon {
    position: relative;
    width: 1em;
    height: 1em;
    vertical-align: -2px;
    fill: currentColor;
}
</style>
